<template>
  <div class="xml-formatter">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>XML 格式化工具</span>
        </div>
      </template>
      <div class="formatter-content">
        <el-form>
          <el-form-item>
            <el-input
              v-model="inputXml"
              type="textarea"
              :rows="10"
              placeholder="请输入需要格式化的 XML 字符串"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="formatXml">格式化</el-button>
            <el-button @click="clearInput">清空</el-button>
          </el-form-item>
        </el-form>
        <div v-if="formattedXml" class="result">
          <pre>{{ formattedXml }}</pre>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const inputXml = ref('')
const formattedXml = ref('')

const formatXml = () => {
  // 这里需要添加 XML 格式化的逻辑
  try {
    // 简单的格式化示例
    const formatted = inputXml.value
      .replace(/>\s*</g, '>\n<')
      .replace(/(<.*?>)/g, '\t$1')
    formattedXml.value = formatted
  } catch (error) {
    ElMessage.error('XML 格式不正确')
  }
}

const clearInput = () => {
  inputXml.value = ''
  formattedXml.value = ''
}
</script>

<style lang="scss" scoped>
.xml-formatter {
  .formatter-content {
    .result {
      margin-top: 20px;
      padding: 15px;
      background: #f5f7fa;
      border-radius: 4px;
      
      pre {
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
    }
  }
}
</style> 